<template>
  <li class="cell-item" @click="click">
    <el-row>
      <el-col :span="4">
        <el-badge
          :value="session.unreadCount"
          :hidden="session.unreadCount <= 0"
          :max="99"
        >
          <el-avatar class="avatar" shape="square" :src="head"></el-avatar>
        </el-badge>
      </el-col>
      <el-col :span="12" :offset="2">
        <div>
          <div class="cell-name">{{ name }}</div>
          <div class="cell-message">
            {{ session.lastMessage.playload.text }}
          </div>
        </div>
      </el-col>
      <el-col :span="6"
        ><div class="cell-time">{{ messageTime }}</div></el-col
      >
    </el-row>
  </li>
</template>

<script>
import moment from "moment";
export default {
  name: "Chats",
  props: {
    session: {
      type: Object,
      default() {
        return {
          sessionId: "",
          sessionType: "",
          userId: "",
          userProfile: {},
          groupProfile: {},
          lastMessage: {},
          unreadCount: 0,
        };
      },
    },
  },
  computed: {
    head() {
      if (this.session.sessionType === "GROUP") {
        return this.session.groupProfile.groupHead;
      }
      console.log(this.session)
      return this.session.userProfile.friendHead;
    },
    name() {
      if (this.session.sessionType === "GROUP") {
        return this.session.groupProfile.groupName;
      }
      return this.session.userProfile.friendMemo;
    },
    messageTime() {
      //获取系统当前时间
      if (!this.session.lastMessage) {
        return "";
      }
      let timestamp = this.session.lastMessage.createTime;
      if (timestamp.toString().length == 10) timestamp *= 1000;
      var nowDate = new Date();
      var time = new Date(timestamp);
      if (nowDate.getFullYear() === time.getFullYear()) {
        if (
          nowDate.getMonth() === time.getMonth() &&
          nowDate.getDate() === time.getDate()
        ) {
          return moment(timestamp).format("HH:mm");
        } else {
          return moment(timestamp).format("MM/DD");
        }
      }
      return moment(timestamp).format("YYYY/MM/DD");
    },
  },
  methods: {
    click() {
      this.$emit("click", this.session);
    },
  },
};
</script>

<style lang="less" scoped>
.cell-item {
  padding: 10px;
  list-style-type: none;
}
.cell-item:hover {
  background-color: #e0e2e6;
}
.avatar {
  width: 45px;
  height: 45px;
}
.cell-name {
  font-size: 14px;
}
.cell-message {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
  font-size: 12px;
  color: #909399;
}
.cell-time {
  font-size: 12px;
  text-align: right;
  color: #909399;
}
</style>